<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container home">

    <div class="divBox">
      <el-row :gutter="24" class="baseInfo">
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">项目总数</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.totalProjects" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">客户</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.totalCustomer" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">供应商</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.totalSupplier" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">商品总数</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.totalProducts" />
            </div>
          </el-card>
        </el-col>

      </el-row>

      <el-row :gutter="24" class="baseInfo">
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">待收款订单</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.customerOrdersNotPayed" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">客户订单</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.totalCustomerOrders" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">供应商订单</span>
                <el-tag type="success">全部</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.totalSupplierOrders" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <template #header>
              <div  class="acea-row row-between-wrapper">
                <span style="font-size: large;">即将到期的订单</span>
                <el-tag type="success">最近</el-tag>
              </div>
            </template>
            <div style="text-align: center; display: block;">
              <el-statistic title="" :value="formForStats.customerOrdersExpiring" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span style="font-size: large;">通知公告</span>
          </div>
        </template>
        <el-table :data="noticeList" style="width: 100%" :show-header="false" :row-class-name="rowNoticesIndex">
          <el-table-column label="序号" align="center" prop="index" width="50" />
          <el-table-column label="公告标题" align="left" prop="noticeTitle" :show-overflow-tooltip="true"/>
<!--          <el-table-column label="公告类型" align="center" prop="noticeType" width="100">-->
<!--            <template #default="scope">-->
<!--              <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="状态" align="center" prop="status" width="100">-->
<!--            <template #default="scope">-->
<!--              <dict-tag :options="sys_notice_status" :value="scope.row.status" />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="创建者" align="center" prop="createBy" width="100" />-->
          <el-table-column label="创建时间" align="center" prop="createTime" width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>

        </el-table>
      </el-card>

  </div>
</template>

<script setup>

import { listScmStatsDaily } from "@/api/scm/scmStatsDaily";

const scmStatsDailyList = ref([]);


const dataForStats = reactive({
  formForStats: {},
  queryParamsForStats: {
    pageNum: 1,
    pageSize: 10,
    statsDate: new Date(),
  }

});

const { queryParamsForStats, formForStats } = toRefs(dataForStats);

/** 查询每天变化统计信息-总列表 */
function getListForStatsDaily() {
    listScmStatsDaily(queryParamsForStats.value).then(response => {
    // scmStatsDailyList.value = response.rows;
      formForStats.value = response.rows[0];
  });
}


// 表单重置
function reset() {
  formForStats.value = {
    id: null,
    statsDate: null,
    totalProjects: null,
    totalProducts: null,
    totalCustomer: null,
    totalSupplier: null,
    totalActiveCustomer: null,
    totalActiveSupplier: null,
    totalCustomerOrders: null,
    totalSupplierOrders: null,
    customerOrdersExpired: null,
    supplierOrdersExpired: null,
    customerOrdersExpiring: null,
    supplierOrdersExpiring: null,
    customerOrdersNotPayed: null,
    supplierOrdersNotPayed: null,
    createTime: null,
    updateTime: null
  };
  proxy.resetForm("scmStatsDailyRef");
}

getListForStatsDaily();





/** Notic */
/** 客户订单明细序号 */
function rowNoticesIndex({ row, rowIndex }) {
  row.index = rowIndex + 1;
}
import { listNotice} from "@/api/system/notice";

const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");

const noticeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    noticeTitle: undefined,
    createBy: undefined,
    status: undefined
  }
});

const { queryParams} = toRefs(data);

/** 查询公告列表 */
function getList() {
  loading.value = true;
  listNotice(queryParams.value).then(response => {
    noticeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}



getList();
</script>

<style scoped>
.home {
  blockquote {
    padding: 10px 20px;
    margin: 20px 0;
    border-left: 5px solid #eee;
    border-radius: 3px;
    background: #fcfcfc;
  }
  hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.acea-row {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* 辅助类 */
}

/* 上下两边居中对齐 */
.acea-row.row-between-wrapper {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.baseInfo {
  ::v-deep .el-card__header {
    padding: 10px 20px !important;
  }
}

.ivu-mb {
  margin-bottom: 10px;
}
.up,
.el-icon-caret-top {
  color: #f5222d;
  font-size: 12px;
  opacity: 1 !important;
}

.down,
.el-icon-caret-bottom {
  color: #39c15b;
  font-size: 12px;
  /*opacity: 100% !important;*/
}

.el-divider--horizontal{
  margin: 10px 0;
}
</style>